<template>
  <view v-if="detailData.articleId" class="content">
    <view class="baseData flex f-ai-c f-jc-sb pt30 pl30 pr30">
      <view class="flex-1 flex f-ai-c">
        <uv-image
          :src="`${env.ossBucket}${detailData.images}`"
          width="86rpx"
          height="86rpx"
          mode="aspectFill"
          shape="circle"
        >
          <template v-slot:loading>
            <uv-loading-icon></uv-loading-icon>
          </template>
        </uv-image>
        <view class="flex-1 flex f-ai-fs f-jc-sa f-fd-c ml16 h86">
          <view class="baseDataText1 uv-line-1">{{ userInfo.userName }}</view>
          <view class="baseDataText2">
            刚刚发布
            <template v-if="detailData.location"
              >| {{ detailData.location }}</template
            >
          </view>
        </view>
      </view>
      <view class="ml32">
        <FollowStyle :isFollow="false" size="large" />
      </view>
    </view>
    <view class="detailData">
      <view class="title">
        <view class="articleType">
          <ArticleTypeStyle :type="detailData.articleType" />
        </view>
        <view class="text uv-line-2">
          {{ detailData.title }}
        </view>
      </view>
      <view class="mb20">
        <uv-swiper
          :list="images"
          @change="(e) => (imgSwiperCurrent = e.current)"
          :autoplay="false"
          height="602rpx"
        >
          <template v-slot:indicator>
            <view class="indicator">
              <view
                class="indicator__dot"
                v-for="(item, index) in images"
                :key="index"
                :class="[
                  index === imgSwiperCurrent && 'indicator__dot--active',
                ]"
              ></view>
            </view>
          </template>
        </uv-swiper>
      </view>
    </view>
    <view v-show="false">{{ distance }}</view>
    <view class="pl74 pr74 flex f-ai-c f-jc-sb">
      <view>距离：{{ distanceRef }}</view>
      <view>查看量：{{ detailData.viewCount || 0 }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, toRef, computed, getCurrentInstance } from "vue";
import { useStore } from "vuex";
import FollowStyle from "/components/FollowStyle/index.vue";
import ArticleTypeStyle from "/components/ArticleTypeStyle/index.vue";

import useUserInfo from "/utils/useUserInfo.js";
import initQQmap from "/utils/initQQmap.js";

import ArticleManagement from "/api/articleManagement.js";

const store = useStore();
store.dispatch("position/getPosition", {
  settingTitle: "请求授权当前位置",
  settingContent: "需要获取您的地理位置，看看您与发帖人的距离！",
});
const latitude = toRef(store.state.position, "latitude");
const longitude = toRef(store.state.position, "longitude");

const props = defineProps({
  detailId: {
    type: Number,
    required: true,
  },
});
const detailId = toRef(props, "detailId");

const { appContext } = getCurrentInstance();
const ossBucket = appContext.config.globalProperties.env.ossBucket;

const { userInfo } = useUserInfo();

const detailData = ref({});
const imgSwiperCurrent = ref(0);
const images = computed(() => {
  return detailData.value.images.split(",").map((item) => {
    item = ossBucket + item;
    return item;
  });
});
const getDetail = async () => {
  const res = await ArticleManagement.getArticleDetail(detailId.value);
  console.log(res);
  detailData.value = res.data;
};

getDetail();

const distanceRef = ref(0);
const distance = computed(async () => {
  if (
    latitude.value !== 0 &&
    longitude.value !== 0 &&
    detailData.value.longitude !== 0 &&
    detailData.value.latitude !== 0
  ) {
    return await new Promise((resolve) => {
      initQQmap().calculateDistance({
        mode: "straight",
        from: {
          latitude: latitude.value,
          longitude: longitude.value,
        },
        to: [
          {
            latitude: detailData.value.latitude,
            longitude: detailData.value.longitude,
          },
        ],
        success: ({ status, result }) => {
          console.log("result", result);
          if (status !== 0) {
            distanceRef.value = 0;
            resolve(0);
          } else {
            distanceRef.value = result.elements[0].distance;
            resolve(result.elements[0].distance);
          }
        },
        fail: () => {
          distanceRef.value = 0;
          resolve(0);
        },
      });
    });
  }
  return 0;
});
</script>

<style lang="scss">
.baseDataText1 {
  color: #666666;
  font-weight: 500;
  font-size: 28rpx;
}
.baseDataText2 {
  color: #999999;
  font-size: 22rpx;
}
.detailData {
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  padding: 0 74rpx;
}
.title {
  position: relative;
  margin-bottom: 20rpx;
  .text {
    font-size: 30rpx;
    font-weight: 500;
    color: #333333;
    text-indent: 3.2em;
    line-height: 40rpx;
  }
}
.articleType {
  position: absolute;
  top: 2rpx;
  left: 0;
}
.indicator {
  display: flex;
  justify-content: center;
  &__dot {
    height: 6px;
    width: 6px;
    border-radius: 100px;
    background-color: rgba(255, 255, 255, 0.35);
    margin: 0 5px;
    transition: background-color 0.3s;
    &--active {
      background-color: #ffffff;
    }
  }
}
</style>
